<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="personnelItem-box flex-row-center">
		<view class="item-left flex-row-center">
			<!-- <image :src="personneInfo.avatar" class="ava" mode="aspectFill"></image> -->
			<up-image :src="personneInfo.avatar" radius="34rpx" :errorIcon="errImg" width="68rpx" height="68rpx"
				shape="circle"></up-image>
			<text class="name">{{personneInfo.nickname}}</text>
			<view class="lv-box flex-row-center">
				<image :src="personneInfo.vip_icon" class="lv-icon" mode=""></image>
				<text class="lv">{{personneInfo.vip_name}}</text>
			</view>
			<text class="statistics" v-if="personneInfo.team_count">组队{{personneInfo.team_count}}次</text>
		</view>
		<view class="flex-row-center">
			<template v-if="personneInfo.followed!==-1">
				<text class="follow-y" @click="changeFollow(1)" v-if="personneInfo.followed">已关注</text>
				<view class="follow-btn flex-center" v-else @click="changeFollow(0)">
					<text class="follow">关注</text>
				</view>
			</template>
			<view class="item-btn flex-center" @click="changeItemIndex()">
				<view :class="[itemIndex?'icon-actvie':'icon']">
					<up-icon name="arrow-right-double" color="#DEDEDE" size="28rpx"></up-icon>
				</view>
			</view>
		</view>
	</view>
	<view :class="[itemIndex?'personnelItem-info':'personnelItem-no','w100 flex-row-center']">
		<view class="name-box flex-row-center">
			<text class="name">{{personneInfo.real_name}}</text>
			<template>
				<template>
					<up-icon name="man" v-if="personneInfo.gender==1" color="#2979ff" size="28rpx"></up-icon>
					<up-icon name="woman" v-else-if="personneInfo.gender==2" color="#F8BBC4" size="28rpx"></up-icon>
				</template>
			</template>
		</view>
		<view class="option-box">
			<text class="phone">{{personneInfo.mobile}}</text>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		personneInfo: {
			default: {}
		}
	});
	import {
		userInfoStore
	} from '@/stores/user';
	import {
		configInfoStore
	} from '@/stores/config.js';
	const {
		configInfo
	} = configInfoStore();
	const errImg = ref(computed(() => configInfo.user_default_avatar?.value))
	const itemIndex = ref(false);
	const personneInfo = ref(computed(() => props.personneInfo));
	const changeFollow = async (type) => { //关注
		// let token = uni.getStorageSync('user_token');
		// if (!token) {
		// 	uni.$u.toast('请先登录');
		// 	return
		// }
		if (type) {
			const res = await $Api.user.cancelFollow({
				user_id: personneInfo.value.user_id
			});
			if (res.code == 1) {
				uni.showToast({
					title: '已取消'
				});
				personneInfo.value.followed = 0;
			} else {
				uni.$u.toast(res.msg);
			}
		} else {
			const res = await $Api.user.follow({
				user_id: personneInfo.value.user_id
			});
			if (res.code == 1) {
				uni.showToast({
					title: '关注成功'
				});
				personneInfo.value.followed = 1;
			} else {
				uni.$u.toast(res.msg);
			}
		}

	}
	const changeItemIndex = (index) => { //查看详情
		itemIndex.value = !itemIndex.value;
	}
</script>
<style lang="scss" scoped>
	.personnelItem-box:not(:last-child) {}

	.personnelItem-box {
		justify-content: space-between;

		.item-left {
			.ava {
				width: 68rpx;
				height: 68rpx;
				border-radius: 50%;
				// margin-right: 18rpx;
			}

			.name {
				max-width: 188rpx;
				font-weight: 500;
				font-size: 34rpx;
				color: rgba(255, 255, 255, 0.87);
				text-overflow: ellipsis;
				white-space: nowrap;
				lines: 1;
				overflow: hidden;
				margin-left: 18rpx;
			}

			.lv-box {
				margin: 0 54rpx 0 8rpx;

				.lv-icon {
					width: 44rpx;
					height: 38rpx;
					margin-right: 4rpx;
				}

				.lv {
					font-weight: bold;
					font-size: 20rpx;
					color: #FFE4A3;
				}
			}

			.statistics {
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
			}
		}

		.follow-btn {
			width: 96rpx;
			height: 48rpx;
			border-radius: 12rpx;
			border: 2rpx solid #5F8B70;

			.follow {
				font-weight: bold;
				font-size: 28rpx;
				color: #A2DEA3;
			}
		}

		.follow-y {
			font-weight: bold;
			font-size: 28rpx;
			color: #666666;
		}
	}

	.item-btn {
		font-weight: 500;
		font-size: 24rpx;
		color: $title-color;
		flex-shrink: 0;
		margin-left: 16rpx;

		.icon {
			transition: all .5s;
			transform: rotate(90deg);
		}

		.icon-actvie {
			transition: all .5s;
			transform: rotate(-90deg);
		}
	}

	.phone {
		font-size: 28rpx;
	}

	.personnelItem-info {
		height: 88rpx;
		justify-content: space-between;
		color: $description-color;
		transition: height .5s;

		.name-box {
			font-size: 28rpx;
			color: $description-color;

			.name {
				margin-right: 12rpx;
			}
		}
	}

	.personnelItem-no {
		height: 0;
		transition: all .5s;
		overflow: hidden;
	}
</style>